<template>
  <div>
    <audio ref="audioPlayer" style="display: none"  id="warningAudio">
      <source src="../assets/music/tips.mp3" type="audio/mpeg" style="display: none">
      您的浏览器不支持声音播放。
    </audio>
  </div>
</template>

<script>
export default {
  props:{
    play:{
      type:Boolean,
      default:false
    }
  },
  watch:{
    // eslint-disable-next-line no-unused-vars
    play(newVal,oldVal){
      if (newVal === true){
        let warningAudioDom = document.getElementById('warningAudio');
        // 触发交互
        warningAudioDom.pause();
        this.playSound();
      }
    }
  },
  methods: {
    playSound() {
      const audioPlayer = this.$refs.audioPlayer;
      audioPlayer.play();
      this.$emit('endOfPlay')
    }
  }
}
</script>
